<template>
  <div class="summary">
     <div class="checkAll">
       <check-button class="checkButton"  @click.native="checkedChange" :isChecked="isCheckAll"></check-button>
       <span>全选</span>
     </div>
     <div class="totalPrice">
       <span class="price">总计:  {{fakePrice}}元</span>
     </div>
     <div class="pay" @click="buy">
       去结算({{goodsLength}})
     </div>
  </div>
</template>

<script>
  import checkButton from 'components/common/checkButton/button.vue'
  import {mapGetters} from 'vuex'
  export default{
    name:'',
    data(){
      return {

       }
    },
    methods:{
      checkedChange(){
        this.$store.commit('setGoodsPayReverse',this.isCheckAll)
        // this.reserve()
        this.fakePrice= this.getGoodsPrice()
        this.$emit("fakePrice",this.getGoodsPrice())
      },
      getGoodsPrice(){
        let state=this.$store.state
        return state.goodsList.filter(item=>{
          return item.pay
        }).reduce((pre,item)=>{

          return item.count*item.price+pre
        },0)
      },
      reserve(){
        let isAll=!!this.goodsLength&&!(this.$store.state.goodsList.filter(item=>!item.pay).length)
        let state=this.$store.state
        console.log("all",state.goodsList);
        if(isAll){
          for(let i of state.goodsList){
            i.pay=false
          }
        }
        else{
          for(let i of state.goodsList){
            // console.log('true');
            i.pay=true
          }
        }
      },
      buy(){
        this.$bus.$emit("carBuy")
      }
    },
    computed:{
      ...mapGetters({
        goodsLength:'getGoodsLength'
      }),
      isCheckAll:{
        get(){
          return !!this.goodsLength&&!(this.$store.state.goodsList.filter(item=>!item.pay).length)
        },
        set(val){

        }
      },
      fakePrice:{
        get(){
          return this.totalPrice
        },
        set(val){

        }
      }
    },
    components:{
       checkButton
    },
    props:{
      totalPrice:{
        type:Number,
        default:0
      }
    }
  }
</script>

<style scoped>
  .summary{
    position: relative;
    display: flex;
    justify-content: space-between;

  }
  .summary::after{
    content: '';
    font-size: 0;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
  }
  .checkAll{
    display: flex;
    flex:2;
    margin-left: 5px;
  }
  .checkButton{
    margin-right: 5px;
    line-height: 50px;
  }
  .totalPrice{
    flex: 6;
  }
  .price{
    margin-left: 15px;
  }
  .pay{
    background-color: orange;
    color: white;
    font-size: 19px;
    flex: 4;
    text-align: center;
  }
</style>
